<template>
	<view class="container">
		<view class="header">
			<view class="header-left">
				<image :src="bookInfo.imgSrc" class="img" mode="aspectFill"></image>
				<progress show-info :percent="bookInfo.process" activeColor="#17b00a" backgroundColor="#c32204"
					stroke-width="5" class="chart" />
			</view>
			<view class="header-middle">
				<view class="book-name">{{bookInfo.bookName}}</view>
				<view class="row">
					<view>生词:</view>
					<uni-tag :circle="true" :text="bookInfo.newWords+''" type="error" />
				</view>
				<view class="row">
					<view>单词:</view>
					<view>{{bookInfo.words}}</view>
				</view>
				<view class="row">
					<view>总词数:</view>
					<view>{{bookInfo.totalWords}}</view>
				</view>
				<view class="row">
					<view>生词率:</view>
					<view class="rate">{{bookInfo.newWordsRate}}‰</view>
				</view>
				<button type="primary" plain size="mini" class="btn">同系列</button>
			</view>
			<view class="header-right">
				<image :src="bookInfo.authorImg" class="img"></image>
				<view class="text">{{bookInfo.authorName}}</view>
			</view>
		</view>
		<scroll-view scroll-x class="middle">
			<view v-for="fun in funcList" :key="fun.iconType" class="middle-item" @click="toRead">
				<uni-badge v-if="fun.badge" :text="fun.badge+'%'" :type="fun.badgeType" size="normal" :max-num="100"
					:offset="[-20,-10]" absolute="rightTop">
					<cl-icon :type="fun.iconType" :color="fun.iconColor" :size="fun.iconSize"></cl-icon>
				</uni-badge>
				<cl-icon v-else :type="fun.iconType" :size="fun.iconSize" :color="fun.iconColor"></cl-icon>
				<text class="text">{{fun.label}}</text>
			</view>
		</scroll-view>

		<scroll-view scroll-y class="catalog">
			<view v-for="(item,index) in catalogList" :key="index" class="catalog-item">
				<uni-section :title="index+1+'、'+item.title" titleFontSize="20px" :sub-title="item.subTitle"
					subTitleFontSize="14px"></uni-section>
				<view class="word-info">
					<view class="word">
						<view>单词:</view>
						<view>{{item.words}}</view>
					</view>
					<progress show-info :percent="item.rage" activeColor="#17b00a" backgroundColor="#c32204"
						stroke-width="5" class="chart" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const bookInfo = ref({
		imgSrc: '../../../static/image/page.png',
		bookName: '神奇树屋',
		authorImg: '../../../static/image/page.png',
		authorName: 'Mary Pope',
		newWords: 137,
		words: 1045,
		totalWords: 9500,
		newWordsRate: 17.7,
		process: 60
	})
	const funcList = ref([
		{
			label: '继续阅读',
			badge: 45.23,
			badgeType: 'primary',
			iconType: 'paperplane-filled',
			iconColor: '#797979',
			iconSize: '34'
		}, {
			label: '笔记摘抄',
			iconType: 'settings',
			iconColor: '#797979',
			iconSize: '34'
		}
	])
	const catalogList = ref(Array(10).fill({
		title: 'To a Port Far Away',
		subTitle: 'Knock,knock',
		words: 176,
		rage: 94.23
	}))
	function toRead() {
		uni.navigateTo({
			url: "/page_read/read/read"
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.header {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			height: 370rpx;

			.img {
				width: 200rpx;
				height: 270rpx;
			}

			&-left,
			&-right {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 12rpx;
			}

			&-left {
				.chart {
					width: 200rpx;
				}
			}

			&-middle {
				.book-name {
					margin-bottom: 40rpx;
				}

				.row {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.rate {
						color: $uni-color-error;
					}
				}

				.btn {
					display: flex;
					justify-content: center;
				}
			}

			&-right {
				.text {
					text-align: center;
				}
			}
		}



		.middle {
			margin-top: 20rpx;

			:deep(.uni-scroll-view-content) {
				display: flex;
			}

			&-item {
				width: 240rpx;
				height: 200rpx;
				border: 1rpx solid gray;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				row-gap: 14rpx;
			}
		}

		.catalog {
			margin-top: 20rpx;
			overflow-y: hidden;

			&-item {
				width: 100%;
				padding: 20rpx;
				border-bottom: 1rpx solid gray;

				.word-info {
					display: flex;
					justify-content: end;
					column-gap: 48rpx;

					.word {
						display: flex;
						column-gap: 12rpx;
					}

					.chart {
						width: 240rpx;
					}
				}

			}
		}
	}
</style>